<template>
  <div class="bod">
    <div v-if="!islogin">
        <p><van-image  round  width="50px"  height="50px" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
          <span >小猫咪</span><van-button type="success"  size="small" to="/login">登录</van-button>
        </p>
        <p>
          <div class="user">0.00 <br>钱包余额</div>
          <div class="user">0 <br>我的海星</div>
          <div class="user">0<br>优惠折扣</div>
        </p>
    </div>
    <div v-else>
        <p><van-image  round  width="50px"  height="50px" :src= "'http://127.0.0.1:8000'+userinfo.img" /><span >{{ userinfo.name }}</span></p>
        <p>
          <div class="user">{{ userinfo.balance }} <br>钱包余额</div>
          <div class="user">{{ userinfo.score }} <br>我的海星</div>
          <div class="user">{{ userinfo.coupon }}<br>优惠折扣</div>
        </p>
    </div>
    <div class="dd">
      <p><span style="margin-left: 5px; font-weight: 700;" >我的订单</span><span style="float: right;margin-right: 3%;">查看全部订单></span></p>
      <p>
        <div @click="this.$router.push({ path: '/dd', query: { activeName: '待支付' } });"><van-icon name="pending-payment"  size="50px"/><br>待支付</div>
        <div @click="this.$router.push({ path: '/dd', query: { activeName: '进行中' } });"><van-icon name="https://img0.baidu.com/it/u=3278822128,449821782&fm=253&fmt=auto&app=138&f=JPEG?w=458&h=500" size="50px"/><br>进行中</div>
        <div @click="this.$router.push({ path: '/dd', query: { activeName: '已完成' } });"><van-icon name="https://img0.baidu.com/it/u=2292511740,2685514901&fm=253&fmt=auto&app=138&f=JPEG?w=220&h=240" size="50px"/><br>已支付</div>
        <div @click="this.$router.push({ path: '/dd', query: { activeName: '已完成' } });"><van-icon name="https://img1.baidu.com/it/u=2667873679,3045309709&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" size="50px"/><br>退款</div>
      </p>
    </div>
    <div class="gnfw">
      <h4>功能服务</h4>
      <p>
        <div><van-icon name="paid"  size="50px"/><br>我的钱包</div>
        <div><van-icon name="coupon-o"  size="50px"/><br>优惠券</div>
        <div><van-icon name="service-o"  size="50px"/><br>在线客服</div>
        <div><van-icon name="setting-o" size="50px" @click="this.$router.push({ path: '/set' });"/><br>设置</div>
      </p>
    </div>
  </div>
    
    <div class="bql">
      <p>
        <van-tabbar v-model="active" active-color="rgb(16, 185, 252)">
          <van-tabbar-item icon="home-o"  url="/">
            <template #icon="props">
              <img :src="props.active ? icon.active : icon.sy" />
            </template>首页</van-tabbar-item>
          <van-tabbar-item icon="search"  url="/fw">
            <template #icon="props" >
              <img :src="props.active ? icon.active : icon.fw " />
            </template>服务</van-tabbar-item>
          <van-tabbar-item icon="friends-o" url="/dd">
            <template #icon="props">
              <img :src="props.active ? icon.active : icon.dd" />
            </template>订单</van-tabbar-item>
          <van-tabbar-item icon="setting-o" url="/my">
            <template #icon="props">
              <img :src="props.active ? icon.active : icon.inactive" />
            </template>我的</van-tabbar-item>
        </van-tabbar>
      </p>
    </div>
</template>


<script>
import { ref } from 'vue';
import { createApp } from 'vue';
import axios from 'axios';
import { Icon,Tabbar, TabbarItem, } from 'vant';


export default {
  setup() {
    const islogin = localStorage.getItem('userid')
    const userinfo = ref({});
    if(islogin != 'undefined'){
      const getuserinfo = () => {
      axios.get('http://127.0.0.1:8000/zhxy/user/info/', {params: {userid: islogin}  }).then(response => {
        userinfo.value = response.data.data;
        console.log(userinfo.value,111);
      })
      }
      getuserinfo();
      }
    const active = ref(3);
    const icon = {
      sy:'/public/fangzi.jfif',
      fw:'/public/erji.jfif',
      dd:'/public/dingdan.jfif',
      active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
      inactive:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
    };
    return {
      islogin,
      userinfo,
      
      active,
      Tabbar,
      TabbarItem,
      icon
   };
  },
};
</script>
<style scoped>
.bod {
  background-color: #eceaea;
  justify-content: center;
}
.user {
  display: inline-block;
  width: 30%;
  margin-left: 3%;
}
.dd {
  background-color: #ffffff;
  display: block;
  width: 100%;
}
.dd p {
  width:100%;
}
.dd p div{
  display: inline-block;
  width: 20%;
  padding-left: 5%;
}
.gnfw{
  background-color: #ffffff;
  display: block;
  width: 100%;
}
.gnfw p{
  width:100%;
}
.gnfw p div{
  display: inline-block;
  width: 20%;
  padding-left: 5%;
}
.bql {
  position: absolute;
  left: auto;
  right: auto;
  top: auto;
  bottom: 0;
  width: 100%;
  height: 15%;
}
van-tabbar-item {
  display: inline;
  width: 25%;
}
img {
  display: inline;
}
</style>